import Vue from 'vue'
// Vue自定义指令,自行定义一个监听元素高度的方法，并且通过自定义指令将其绑定到对应元素上，实现监听元素的高度变化
Vue.directive('resize', {
  // 指令的定义
  bind(el, binding) {
    let height = "";
    function isResize() {
      // 可根据需求，调整内部代码，利用binding.value返回即可
      const style = document.defaultView.getComputedStyle(el);
      if (height !== style.height) {
        // 此处关键代码，通过此处代码将数据进行返回，从而做到自适应
        binding.value({ height: style.height });
      }
      height = style.height;
    }
    // 设置调用函数的延时，间隔过短会消耗过多资源
    el.__vueSetInterval__ = setInterval(isResize, 100);
  },
  unbind(el) {
    clearInterval(el.__vueSetInterval__);
  },
})
